<template>
    <div class="cvuecli">
        <h2>@vue/cli</h2>
        <div class="hr"></div>
        <el-tag effect="dark">作用</el-tag>
        <p class="decr">
            实现vue项目的快速开发的脚手架。
        </p>
        <div class="hr"></div>
        <el-tag effect="dark">介绍</el-tag>
        <p class="decr">
            老版本的叫vue-cli，当前的版本叫@vue/cli。<br>
            脚手架里默认使用的是vue的运行时版本，非完整版。<br>
            该版本建议配合node的10以上版本。<br>
            如果之前有安装过旧版本的vue-cli脚手架，需要先卸载。<br>
        </p>
        <div class="hr"></div>
        <el-tag effect="dark">全局安装</el-tag>
        <p class="decr">
            npm install -g @vue/cli<br>
            <br>
            # or:<br>
            <br>
            yarn global add @vue/cli
        </p>
        <div class="hr"></div>
        <el-tag effect="dark">检查</el-tag>
        <p class="decr">
            vue --version<br>
            <br>
            如果能显示@vue/cli版本号，则说明安装成功。<br>
            <img src="../assets/image/vue-version.png" alt="">
        </p>
        <div class="hr"></div>
        <el-tag effect="dark">升级</el-tag>
        <p class="decr">
            npm update -g @vue/cli<br>
            <br>
            # 或者<br>
            <br>
            yarn global upgrade --latest @vue/cli
        </p>
        <div class="hr"></div>
        <el-tag effect="dark">创建项目</el-tag>
        <p class="decr">
            vue create 项目名<br>
            <br>
            比如，创建一个名字叫hello-world的vue项目：<br>
            vue create hello-world<br>
        </p>
        <div class="hr"></div>
        <el-tag effect="dark">安装插件</el-tag>
        <p class="decr">
            给一个创建好的项目，安装插件：<br>
            vue add 插件名<br>
            <br>
            本手册在进行按需加载element-ui的时候，就使用了该指令：<br>
            vue add element<br>
        </p>
        <div class="hr"></div>
        <el-tag effect="dark">配置</el-tag>
        <p class="decr">
            可以用vue config xxx来查看或修改配置项。<br>
            <br>
            也可以在根目录下创建vue.config.js文件，来写入配置项。<br>
            // vue.config.js文件格式<br>
            module.export = {<br>
                &emsp;&emsp;// 配置项<br>
            }<br>
        </p>
        <div class="hr"></div>
        <el-tag>publicPath</el-tag>
        <p class="decr">
            部署应用包时的基本 URL。<br>
            就是把项目发布上线时要用到的路径。<br>
            publicPath: process.env.NODE_ENV === 'production' ? '/包名/' : '/'
        </p>
        <div class="hr"></div>
        <el-tag>assetsDir</el-tag>
        <p class="decr">
            放置生成的静态资源 (js、css、img、fonts) 的 (相对于 outputDir 的) 目录。<br>
        </p>
        <div class="hr"></div>
        <el-tag>indexPath</el-tag>
        <p class="decr">
            指定生成的 index.html 的输出路径 (相对于 outputDir)。也可以是一个绝对路径。<br>
            默认为'index.html'<br>
        </p>
        <div class="hr"></div>
        <el-tag>lintOnSave</el-tag>
        <p class="decr">
            在开发环境下，保存文件时是否用eslint检查代码。<br>
            默认是检查。<br>
            可以设置为不检查：<br>
            lintOnSave: false<br>
        </p>
        <div class="hr"></div>
        <el-tag
            effect="dark"
            type="success"
            >
            <a :href="getHref" target="_blank">查看示例代码</a>
        </el-tag>
    </div>
</template>

<script>
import mixinPage from '../VueDemoPages/mixin-page';

export default {
    name: 'Cvuecli',
    mixins: [mixinPage],
}
</script>

<style lang="less" scoped>
@import '../assets/css/mixin-frame.less';
</style>